Estoy tratando de renderizar datos de firebase en tiempo real en reaccionar.
En la consola, estoy recibiendo el error de que
data.component.js:10 TypeError no detectado: firebase__WEBPACK_IMPORTED_MODULE_2 _.default.child no es una función
apuntando a la línea Database.child("L1").on("value", (snapshot) => { del siguiente código.
¿Alguna idea sobre cómo puedo rectificar?
A continuación se muestra una copia de mi código
const Data = () => { const [data, setData] = useState ({}); useEffect (() => { Database.child("L1").on("value", (snapshot) => { if (snapshot.val() !== null) { setData({ ...snapshot.val() }); } else { setData({}); } }); return () => { setData ({}); }; }, []); return ( <div style={{marginTop: "100px"}}> <table className="styled-table"> <thead> <tr> <th style={{textAlign: "center"}}> L4 </th> <th style={{textAlign: "center"}}> L4 </th> </tr> </thead> <tbody> {Object.keys(data).map((id, index) => { return ( <tr key={id}> <th scope="row">{index +1}</th> <td>{data[id].result_1}</td> <td>{data[id].result_2}</td> <td>{data[id].result_3}</td> <td>{data[id].result_4}</td> </tr> ) } )} </tbody> </table> </div> ); }; export default DataConfiguración de base de fuego
import { initializeApp } from 'firebase/app'; import { Database, getDatabase } from "firebase/database"; const firebaseConfig = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "", measurementId: "" }; const app = initializeApp(firebaseConfig); const database = getDatabase(app) export default Database;No tiene clase de base de datos de importación de Realtime Database SDK. Simplemente puede exportar la instancia de la database de datos inicializada y luego usarla.
// Firebase config import { initializeApp } from 'firebase/app'; import { getDatabase } from "firebase/database"; const firebaseConfig = {...}; const app = initializeApp(firebaseConfig); export const database = getDatabase(app)Luego use la sintaxis funcional más nueva en lugar de la anterior con espacio de nombres. Intente refactorizar el código como se muestra a continuación:
// update the path herer import { database } from '../path/to/firebase-config.js' const [data, setData] = useState({}); useEffect(() => { const dbRef = ref(database, 'L1/'); onValue(dbRef, (snapshot) => { if (snapshot.exists()) { setData(snapshot.val()); } else { setData({}); } }); }, []); Puede usar exists() en lugar de verificar si el valor de la instantánea es nulo (que es un poco más eficiente como se menciona en la documentación)